<template>
	<view class="addCoin">
		<!-- <StatusBar></StatusBar>
		<view class="header">
			<view class="search">
				<uni-search-bar placeholder="搜索代币名称/合约/项目名称" bgColor="#F5F6F8" cancelText="取消" cancelButton='always'
					@cancel="cancel" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @clear="clear"
					@confirm="search">
					<template v-slot:searchIcon>
						<image src="/static/images/home/search.png" class="icon" mode=""></image>
					</template>
				</uni-search-bar>
			</view>
		</view> -->
		<HeaderBar title="添加代币" showBack backgroundColor="#F6F6F6" fixed />
		<view class="contentBox">
			<view class="cellGrounp">
				<view class="cell" @tap="homeAssets">
					<text>首页资产</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<!-- <view class="cell">
					<text>我的资产</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view> -->
				<view class="cell" @tap="customTokens">
					<text>自定义代币</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
			</view>
			<view class="hotCoin">
				<view class="hotTitle">
					热门代币
				</view>
				<!--< view class="noticeBox">
					<uni-notice-bar class="notice" color="#F4782E" background-color="#FEF5EE" show-close single
						text="HBuilderX 1.0正式发布！uni-app实现里程碑突破实现里程碑突破！" />
				</view> -->
				<view class="hotList">
					<view class="" v-for="(i,index) in chainInfo.coin" :key="index" v-if="chainInfo">
						<view class="itemBox" v-if="i.contract != $config.defaultAddress">
							<view class="item_icon">
								<image
									:src="'/static/images/tokenicon/'+i.contract+chainInfo.chainType+chainInfo.chainId+'.png'"
									mode="widthFix" class="icon" @error="imageError(i)" v-if="!i.err">
								</image>
								<image src="/static/images/notoken.png" mode="widthFix" class="icon" v-show="i.err">
								</image>
							</view>
							<view class="right">
								<view class="coindes">
									<view class="name">
										<text>{{i.symbol}}</text>
									</view>
									<view class="address">
										{{$utils.formatAddress(i.contract)}}
									</view>
								</view>
								<view class="state" @click="">
									<image src="/static/images/home/addCoin.png" class="icon" mode="widthFix"
										@tap="setTokenInfo(i)" v-if="!isHave(i.contract)"></image>
									<image src="/static/images/home/delCoin.png" class="icon" mode="widthFix"
										@tap="delToken(i.contract)" v-else></image>

								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				selectChain: {},
				hotTokens: [],
				tokensList: []

			}
		},
		computed: {
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			choinInfo() {
				return this.$store.getters.choinInfo
			},
			address() {
				return this.$store.getters.getAddress;
			},
			chainId() {
				return this.$store.getters.getChainId;
			},
		},
		watch: {
			chainInfo(newValue, oldValue) {
				newValue.coin.forEach(arrItem => {
					const isInMyList = this.choinInfo.some(myItem => myItem.tokenaddress === arrItem.contract);
					if (isInMyList) {
						arrItem.isHave = true
					} else {
						arrItem.isHave = false
					}
				});
			},
		},
		mounted() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		},
		methods: {
			imageError(item) {
				this.$set(item, 'err', true);
			},
			isHave(tokenaddress) {
				const isInMyList = this.choinInfo.some(myItem => myItem.tokenaddress === tokenaddress);
				return isInMyList
			},
			setTokenInfo(value) {
				let hotToken = {
					address: this.address,
					chainType: this.addressInfo.chainType,
					chainName: this.addressInfo.chainName,
					chainId: this.chainId,
					tokenaddress: value.contract,
					tokenname: value.name,
					tokenimg: value.ico,
					tokennum: "0",
					tokendemail: value.decimal,
					tokensymbol: value.symbol,
					tokenprice: "1",
				}
				uni.$db.insert('list', 'choinList', hotToken).then((res) => {
					this.$updateWalletInfo()
				}).catch((err) => {});
			},
			delToken(tokenaddress) {
				uni.$db.delete('list', { // 删除一条数据
					from: 'choinList',
					where: [{
						address: `= "${this.address}"`,
						tokenaddress: `= "${tokenaddress}"`
					}]
				}).then(res => {
					this.$updateWalletInfo()
				})
			},
			homeAssets() {
				uni.navigateTo({
					url: '/pages/homeAssets/homeAssets'
				})
			},
			customTokens() {
				uni.navigateTo({
					url: '/pages/customTokens/customTokens'
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
		}
	}
</script>


<style scoped lang="scss">
	.addCoin {
		color: #3D3D3D;
		font-weight: 400;

		.header {
			display: flex;
			align-items: center;
			padding: 0 38upx;

			.search {
				flex: 1;

				.icon {
					width: 26upx;
					height: 26upx;
				}

				.uni-searchbar {
					padding: 20upx 0;
				}

				.uni-searchbar__box {
					height: 66upx;
				}
			}

			.san {
				display: flex;
				margin-left: 26upx;

				.icon {
					width: 54upx;
					height: 54upx;
				}
			}
		}

		.contentBox {
			.cellGrounp {
				font-size: 30upx;
				padding: 0 38upx;

				.cell {
					&:nth-last-child(1) {
						border-bottom: none;
					}

					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1upx solid #D8D8D8;
					padding: 26upx 0;

					.icon {
						width: 20upx;
						height: 20upx;
					}
				}
			}


			.hotCoin {
				padding-left: 38upx;
				padding-top: 20upx;
				border-top: 20upx solid #EFEFEF;

				.hotTitle {
					font-size: 30upx;
				}

				.noticeBox {
					display: flex;
					margin-top: 26upx;
					padding-right: 38upx;

					.notice {
						font-weight: bold;
						height: 88upx;
					}
				}

				.hotList {
					.itemBox {
						display: flex;
						height: 120upx;
						align-items: center;

						.item_icon {
							display: flex;

							.icon {
								width: 68upx;
								height: 68upx;
								border-radius: 50%;
							}
						}

						.right {
							height: 120upx;
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-left: 22upx;
							padding-right: 46upx;
							border-bottom: 1upx solid #D8D8D8;

							.name {
								display: flex;
								align-items: center;
								font-size: 30upx;
							}

							.address {
								color: #A2A2A2;
								font-size: 24upx;
							}

							.state {
								display: flex;

								.icon {
									width: 44upx;
									height: 44upx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>